import UnitSelect from '@app-nextmesh/components/Forms/components/UnitSelect';
import { TYPE_DOUBLE } from '@app-nextmesh/types';
import { useEffect, useState } from 'react';
import { NumberInput, StringInput } from '.';
import { ReactComponent as ExpressionOff } from './icon/expressionOff.svg';
import { ReactComponent as ExpressionOn } from './icon/expressionOn.svg';
import { IBaseProps } from './types';

export type FormType = { Unit?: string; Value: number | string };
interface IProps extends IBaseProps<FormType> {
  units?: string[];
}
/**
 * 数值输入框，包含整数、浮点数、布尔值
 * @param {string} type - 类型 int、double、bool
 * @param {number | boolean} value - 值
 * @param {boolean} disabled - 是否禁用
 * @param {function} onInputChange - 值变化回调函数
 * @param units
 * @param unit
 * @return {JSX.Element}
 */
export default function ExpressionInput({
  value: initValue,
  disabled,
  onChange: onInputChange,
  units,
}: IProps) {
  const [unitF, setUnitF] = useState<string>();
  const [expression, setExpression] = useState(true);
  const [fxNum, setFxNum] = useState(0);
  const [fxStr, setFxStr] = useState('');
  useEffect(() => {
    setUnitF(initValue.Unit);

    if (!initValue?.Value || typeof initValue.Value === 'number') {
      setExpression(false);
      setFxNum(initValue.Value as number);
    } else {
      setExpression(true);
      setFxStr(initValue.Value as string);
    }
  }, [initValue]);

  const expressionChange = (value: number | string) => {
    let unit = unitF;
    if (typeof value === 'number') {
      setExpression(false);
      setFxNum(value);
    } else {
      unit = undefined;
      setExpression(true);
      setFxStr(value);
    }
    onInputChange({ Unit: unit, Value: value });
  };
  const handleUnitChange = (valueUnit: string) => {
    setUnitF(valueUnit);
    const value = expression ? fxStr : fxNum;
    onInputChange({ Unit: valueUnit, Value: value });
  };
  const switchExpression = (isExpression: boolean) => {
    setExpression(isExpression);
    const value = isExpression ? fxStr : fxNum;
    const unit = isExpression ? undefined : unitF;
    onInputChange({ Unit: unit, Value: value });
  };
  const iconWidth = units ? { width: '50px' } : { width: '27px' };
  return (
    <div style={{ display: 'flex' }}>
      {!expression ? (
        <>
          <NumberInput
            type={TYPE_DOUBLE}
            value={fxNum}
            disabled={disabled}
            onChange={expressionChange}
          />
          {units && unitF ? (
            <UnitSelect
              disabled={disabled}
              units={units}
              value={unitF.toString()}
              onChange={handleUnitChange}
            />
          ) : null}
          <ExpressionOff
            style={{ ...iconWidth, marginLeft: '5px', cursor: 'pointer' }}
            onClick={() => (disabled ? '' : switchExpression(true))}
          />
        </>
      ) : (
        <>
          <StringInput
            value={fxStr}
            disabled={disabled}
            onChange={expressionChange}
          />
          <ExpressionOn
            style={{ width: '27px', marginLeft: '5px', cursor: 'pointer' }}
            onClick={() => (disabled ? '' : switchExpression(false))}
          />
        </>
      )}
    </div>
  );
}
